<template name="PreviewHead">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
    Certification
  </title>
  <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="stylesheets/print.css" type="text/css" media="print">
  <!--[if lt IE 8]>
    <link rel="stylesheet" href="stylesheets/ie.css" type
    * ="text/css" media="screen, projection">
  <![endif]-->
</template>

<template name="PreviewBody">
  <style type="text/css" media="screen">
    #certificate{
      width: 760px;
      margin: 2em auto 0px auto;
      border: 10px solid #666;
      padding: 20px;
      background-color: #FFF;
      text-align: center;
    }
    
      #certificate img{
        margin: 2em 0px;
      }
    
      #certificate h1{
        margin: 1em 0px;
      }
    
    #signature{
      text-align: left;
    }
    
      #signature > p{
        width: 48%;
        margin: 4em 0px 2em 1em;
        background-color: #FFF;
        display: inline-block;
        border-top: 1px solid #999;
      }
      
    #instructions{
      width: 250px;
      margin: 2em auto;
      line-height: 3em;
    }
  </style>
  <style type="text/css" media="print">
    #instructions{
      display: none;
    }
  </style>

  {{{certificate_rendered}}}
  {{{instructions_rendered}}}
  
  <script src="./javascripts/lib/jquery.min.js" type="text/javascript"></script>
  <script src="./javascripts/lib/jquery.mustache.js" type="text/javascript"></script>
  
</template>

<template name="PreviewCertificate">
  {{{certificate_markup}}}
</template>

<template name="PreviewInstructions">
  {{{instructions_markup}}}
</template>